<!--
*@Author: QWP
*@Description: 应急群管理 - 建群指南
*@Date: 2024-07-11 10:59:02
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-header class="f-h-auto" 
      style="background-color: unset;">
      <u-card style="width: 250px;background-color: #1890FF "
        @click="toEdit">
        <a-row :align="'middle'" justify="space-between" style="height: 100px;">
          <a-space>
            <div style="width: 56px; height: 56px;background: rgba(255,255,255,0.5); border-radius: 16px; line-height: 56px;text-align: center;">
              <UsergroupAddOutlined style="font-size: 28px; color:#fff"/>
            </div>
            <span style="color: #FFF; font-size: 16px;">创建应急群</span>
          </a-space>
          <PlusOutlined style="color: #fff;"/>
        </a-row>
      </u-card>
    </a-layout-header>
    <a-layout-content class="s-bg-white f-margin-t12">
      <u-card title="操作指引">
        <a-list :grid="{ gutter: [30, 20], column: 2 }" :data-source="direction">
          <template #renderItem="{ item }">
            <a-row >
              <div style="width: 32px;
                height: 32px;
                background: #1890FF;
                border-radius: 50%;
                text-align: center;
                line-height: 32px; color: #fff">
                {{ item.step }}
              </div>
              <a-col flex="1">
                <div class="f-padding-l18" style="font-size: 18px;color: #333333;">{{ item.title }}</div>
                <div class="f-padding-l18" style="font-size: 14px;color: #666666;">{{ item.msg }}</div>
                <a-image :src="item.img" style="width: 50%; height: 200px" :preview="false"></a-image>
              </a-col>
            </a-row>
          </template>
        </a-list>
      </u-card>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <EditD v-model:open="showEdit"
    width="70%"
    :title="dialogTitle" 
    @success="(data) => {
      showEdit = false; 
      emits('success', { ...data, types: 1  })
      if(isShowShare == true) {
        groupInfo = data;
        showShare = true
      }
    }"/>

  <!-- 分享二维码弹窗 -->
  <ShareQrcode v-model:open="showShare"
    width="50%"
    :keyid="groupInfo['keyid']"
    title="二维码生成" />
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import EditD from './createEdit/EditD.vue'
import ShareQrcode from './ShareQrcode.vue'
import { urlFile } from '@/util/common'

const props = withDefaults(
  defineProps<{
    isShowShare?: boolean
  }>(),
  {
    isShowShare: true
  }
)
const emits = defineEmits(['success'])

// 创建群聊
let dialogTitle = ref<string>("创建应急群")
let showEdit = ref<boolean>(false)
let showShare = ref<boolean>(false)
let groupInfo = ref({})

const direction = reactive<any[]>([
  { step: 1, title: '创建群聊', msg: '需要创建的发起者点击创建群聊按钮', img: urlFile('group/1.png')},
  { step: 2, title: '生成二维码', msg: '发起者生成二维码并分享', img: urlFile('group/2.png')},
  { step: 3, title: '扫码填写信息', msg: '参与者扫描二维码填写申请信息', img: urlFile('group/3.png')},
  { step: 4, title: '审核信息', msg: '发起者审核申请人信息后生成临时群交流', img: urlFile('group/4.png')},
])

const toEdit = () => showEdit.value = true

defineExpose({
  toEdit,
});

</script>

<style lang='scss' scoped>
</style>